<template>  
  <view class="container">  
    <view class="header">  
      <text class="title">袁隆平杂交水稻科学园</text>  
      <button @click="login">点击登录</button>  
    </view>  
    <view class="main">  
      <view class="tab-bar">  
        <button @click="showTab('预约记录')">预约记录</button>  
        <button @click="showTab('暂无预约记录')">暂无预约记录</button>  
        <!-- 假设这里还有一个技术支持的按钮或链接，但图中未明确显示 -->  
      </view>  
      <view v-if="currentTab === '预约记录'">  
        <!-- 预约记录列表展示 -->  
        <view class="record-list">  
          <!-- 这里使用v-for循环展示预约记录 -->  
          <view class="record-item" v-for="(record, index) in records" :key="index">  
            <text>{{ record.date }} - {{ record.name }}</text>  
            <!-- 其他预约记录详情 -->  
          </view>  
        </view>  
      </view>  
      <view v-if="currentTab === '暂无预约记录'">  
        <text class="no-records">您暂无预约记录，请尽快预约！</text>  
      </view>  
    </view>  
  </view>  
</template>

<script>  
export default {  
  data() {  
    return {  
      currentTab: '预约记录', // 当前选中的标签页  
      records: [] // 假设的预约记录数据  
    };  
  },  
  methods: {  
    login() {  
      // 登录逻辑，可能是跳转到登录页面或弹出登录框  
      uni.navigateTo({  
        url: '/pages/login/login'  
      });  
    },  
    showTab(tab) {  
      this.currentTab = tab;  
    },  
    // 假设的获取预约记录的方法  
    fetchRecords() {  
      // 这里应该是从服务器获取数据，这里用静态数据模拟  
      this.records = [  
        { date: '2023-04-01', name: '张三' },  
        { date: '2023-04-02', name: '李四' }  
      ];  
    }  
  },  
  onLoad() {  
    this.fetchRecords(); // 加载页面时获取预约记录  
  }  
};  
</script>

<style scoped>  
.container {  
  padding: 20px;  
}  
.header {  
  display: flex;  
  justify-content: space-between;  
  align-items: center;  
  margin-bottom: 20px;  
}  
.title {  
  font-size: 20px;  
  font-weight: bold;  
}  
.main {  
  margin-top: 20px;  
}  
.tab-bar button {  
  margin-right: 10px;  
}  
.record-list {  
  /* 列表样式 */  
}  
.record-item {  
  /* 单个记录样式 */  
  padding: 10px;  
  border-bottom: 1px solid #eee;  
}  
.no-records {  
  text-align: center;  
  padding: 20px;  
}  
</style>